<template>
  <el-dialog
      title="巡航组配置"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      @open="onOpen"
  >
    <el-form ref="cruiseForm" :inline="true" :model="form" class="demo-form-inline" :rules="rules">
      <div class="flex-between-top">
        <el-form-item label="巡航组" prop="cruiseGroup">
          <el-select v-model="form.cruiseGroup" style="width: 150px" placeholder="请选择巡航组">
            <el-option v-for="item in cruiseGroupOptions" :label="item" :value="item" :key="item"></el-option>
          </el-select>
          <el-button type="danger" style="margin-left: 20px;">删除组</el-button>
        </el-form-item>
        <div class="flex-between">
          <el-button type="primary" @click="onAdd">添加</el-button>
          <el-button type="danger">删除</el-button>
          <el-button>刷新</el-button>
        </div>
      </div>
      <div class="flex-start">
        <el-form-item label="预置点" prop="presetBit">
          <el-select v-model="form.presetBit" style="width: 150px" placeholder="请选择预置点">
            <el-option v-for="item in presetBitOptions" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停留时间" prop="stopTime" style="margin-left: 20px;">
          <el-select v-model="form.stopTime" style="width: 150px" placeholder="请选择停留时间">
            <el-option v-for="item in stopTimeOptions" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <!--    表格数据-->
    <div style="margin-top: 20px;">
      <el-table
          :data="dataSource"
          border
          style="width: 100%">
        <el-table-column
            prop="presetBit"
            label="预置点"
            align="center"
            width="200">
        </el-table-column>
        <el-table-column
            prop="name"
            align="center"
            label="名称">
        </el-table-column>
        <el-table-column
            type="stopTime"
            label="停留时间"
            align="center"
            width="200">
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "PresetBit",
  data() {
    return {
      dialogVisible: false,//弹窗的显示与隐藏
      dataSource: [],//表格数据
      cruiseGroupOptions: [1, 2, 3],//巡航组选项
      presetBitOptions: [4, 5, 6],//预置点选项
      stopTimeOptions: [7, 8, 9],//停留时间选项
      form: {//表单数据
        cruiseGroup: undefined,//巡航组
        presetBit: undefined,//预置点
        stopTime: undefined,//停留时间
      },
      rules: {
        cruiseGroup: [{required: true, message: '请选择预置点', trigger: 'change'}],
        presetBit: [{required: true, message: '请选择预置点', trigger: 'change'}],
        stopTime: [{required: true, message: '请选择停留时间', trigger: 'change'}],
      }
    }
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    //弹窗打开时触发
    onOpen() {
      if (this.$refs.cruiseForm) {//如果表格已经构建, 则每次打开重置表格内容
        this.$refs.cruiseForm.resetFields()
      }
    },
    //新增
    onAdd() {
      this.$refs.cruiseForm.validate((valid) => {
        if (valid) {
          console.log('this.form', this.form)
          this.$message.success('添加成功')
          this.$refs.cruiseForm.resetFields()//清空数据
        } else {
          return false;
        }
      });
    },
    //编辑
    onEdit(item) {
      console.log(item)
    },
    //删除
    onDelete(item) {
      console.log(item)
    }
  }
}
</script>

<style scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
